<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view class="no-content" v-if="data.coupon.length==0&&data.goods.length==0">暂无兑换记录</view>
        <view style="border-top:1upx solid #e2e2e2;" v-else>
            <view class="exchange flex-row" v-for="(item,index) in data.coupon" :key="item.id">
                <view class="flex-grow-1">
                    <view class="cpupon-name text-more">{{item.coupon.name}} 满{{item.coupon.min_price}}元可用</view>
                    <view class="cpupon-price">{{item.integral}}积分
                            <block v-if="item.price>0">+{{item.price}}</block>
                    </view>
                </view>
                <view class="flex-row flex-grow-0 flex-y-center" style="margin-left:40upx;">
                    <navigator hoverClass="none" :url="'/pages/coupon/coupon?status='+item.status">
                        <view class="chakan">我的优惠券</view>
                    </navigator>
                </view>
            </view>
            <view class="exchange flex-row" v-for="(item,index) in data.goods" :key="item.id">
                <view class="flex-grow-1 flex-row">
                    <view class="flex-grow-0">
                        <image class="goods-img" :src="item.pic"></image>
                    </view>
                    <view class="goods-detail flex-grow-1 flex-y-center">
                        <view>
                            <view class="goods-name">{{item.goods_name}}</view>
                            <view class="goods-price">{{item.pay_integral}}积分
                                    <block v-if="item.total_price>0">+{{item.total_price}}</block>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="flex-grow-0 flex-row flex-y-center" style="margin-left:40upx;">
                    <navigator hoverClass="none" :url="'/pages/integral-mall/clerk/clerk?id='+item.order.order_no+'&type=exchange'">
                        <view class="chakan" :data-id="item.order.order_no">订单详情</view>
                    </navigator>
                </view>
            </view>
            <view style="font-size:9pt;color:#eee;" v-if="data.is_no_more">--没有更多记录--</view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, e = !1;
	export default {
		data() {
			return {
				data: {
        p: 1,
				coupon: [],
				goods: []
    },
			};
		},
		onLoad: function(o) {myVue = this;
        myVue.getApp.page.onLoad(this, o), t = !1, e = !1;
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this), this.loadData();
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			loadData: function() {
        var o = this, a = o.data.p;
        if (!e) {
            e = !0, myVue.getApp.core.showLoading({
                title: "加载中"
            });
            var n = Math.round(new Date().getTime() / 1e3).toString();
            myVue.getApp.request({
                url: myVue.getApp.api.integral.exchange,
                data: {
                    page: a
                },
                success: function(e) {
                    if (0 == e.code) {
                        var i = e.data.list[0].userCoupon;
                        if (i) for (var p in i) parseInt(i[p].end_time) < parseInt(n) ? i[p].status = 2 : i[p].status = "", 
                        1 == i[p].is_use && (i[p].status = 1);
                        o.setData({
                            goods: e.data.list[0].goodsDetail,
                            coupon: i,
                            page: a + 1,
                            is_no_more: t
                        });
                    }
                },
                complete: function(t) {
                    e = !1, o.getApp.core.hideLoading();
                }
            });
        }
    }
		},
	}
</script>

<style scoped>
page {
    background-color: #fff;
}

.exchange {
    border-bottom: 1upx solid #e2e2e2;
    padding: 40upx 24upx;
}

.cpupon-name {
    color: #353535;
    margin-bottom: 22upx;
}

.cpupon-price {
    color: #ff6f28;
}

.chakan {
    height: 56upx;
    border: 1upx solid #ff4544;
    border-radius: 28upx;
    color: #ff4544;
    padding: 0 16upx;
    display: flex;
    align-items: center;
}

.goods-img {
    width: 180upx;
    height: 136upx;
}

.goods-detail {
    margin-left: 16upx;
    font-size: 9pt;
}

.goods-name {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 28upx;
    color: #353535;
    height: 2.8em;
    line-height: 1.4;
}

.goods-price {
    color: #ff6f28;
}

.no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}
</style>
